<template>
	<fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24">
		<view class="padding">
			<view class="flex justify-between padding-bottom">
				<view class="flex-sub text-center ">
					<text class="fu-fs36">{{ i18n['配送至'] }}</text>
				</view>
				<view class="" @tap="close"><text class="cuIcon-roundclosefill text-gray fu-fs42"></text></view>
			</view>
			<scroll-view class="height-600" scroll-y v-if="addrs.length>0">
				<block v-for="(item, index) in addrs" :key="item.address_id">
					<view class="flex align-center padding-sm" :class="{ 'text-bold': curTab == item.address_id }"
						@tap="selectAddress(index)">
						<view class="margin-right-sm text-999" :class="{ 'text-theme': curTab == item.address_id }">
							<text class="cuIcon-locationfill"></text></view>
						<view class="text-df">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.address }}
						</view>
					</view>
				</block>
			</scroll-view>
			<view class="margin-top" v-if="addrs.length==0 || types == 1">
				<button class="cu-btn bg-theme block round height-88 text-white" @click="handleJump"
					data-url="/pages/address/address-add/index">{{i18n['新增地址']}}</button>
			</view>
			<view class="margin-top" v-if="addrs.length>0 && types == 0">
				<button class="cu-btn bg-theme block round height-88 text-white"
					@click="startFree">{{i18n['已选择该商品，开始免费拿']}}</button>
			</view>
		</view>
	</fu-popup>
</template>

<script>
	export default {
		props: {
			types: {
				type: Number,
				default: 0
			},
			addrs: {
				type: Array,
				default () {
					return [];
				}
			},
			autoClose: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				show: false,
				curTab: 0
			};
		},
		watch: {
			addrs(val) {
				console.log('val', val);
				if (val.length != 0) {
					let cur = val.find(item => item.is_default == 1);
					if (cur) {
						this.curTab = cur.address_id;
						this.$emit('change', cur);
					} else {
						this.curTab = val[0].address_id;
						this.$emit('change', val[0]);
					}
				}
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},
			selectAddress(index) {
				this.curTab = this.addrs[index].address_id;
				this.$emit('change', this.addrs[index]);
				console.log(this['autoClose']);
				if (this['autoClose']) {
					this.close();
				}
			},
			startFree() {
				this.$emit('startFree');
			},
			chooseOther() {
				this.close();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.text-999 {
		color: #999999;
	}
</style>
